<template>
  <el-upload
      ref="upload"
      class="upload-demo"
      action="/api/system/common/upload"
      :limit="1"
      :on-exceed="handleExceed"
      :auto-upload="true"
      :headers="headers"
      :on-success="handleSuccess"
  >
    <template #trigger>
      <el-button type="primary">上传文件</el-button>
    </template>
  </el-upload>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { genFileId } from 'element-plus'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
import {useUserStore} from "@/stores/user.ts";
const emit = defineEmits(['fileData'])

const userStore = useUserStore();
const token = userStore.token
const headers = ref({
  'Authorization':token
})
const upload = ref<UploadInstance>()

const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  upload.value!.handleStart(file)
}
const handleSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
  // imageUrl.value = URL.createObjectURL(uploadFile.raw!)
  emit('fileData', response.data)
}
</script>